<style scoped>
</style>
<!--  -->
<template>
  <div class="choose-form" v-if="dialogShow">
    <SetDesignDialog :title="'选择系统当中的表单'" :dialogVisible="dialogShow" :close="close" :hasfooter="false" ref="settingDialog">
      <div class="loading" v-loading="loading">
        <el-row style="width:580px; margin-top: 12px;">
          <el-col :span="6">
            <el-button @click="addForm" type="primary" size="small">创建表单</el-button>
          </el-col>
        </el-row>
        <el-divider content-position="left">表单系统列表</el-divider>
        <el-row style="width:580px; margin-bottom: 12px;">
          <el-col :span="24">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="name" label="表单名称">
              </el-table-column>
              <el-table-column label="操作" width="100" align="center">
                <template slot-scope="scope">
                  <el-button @click="editorForm(scope.row)" type="text" size="small">编辑</el-button>
                  <el-button @click="chooseForm(scope.row)" type="text" size="small">选择</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </SetDesignDialog>
  </div>
</template>

<script>
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
// import * as WindowType from '@/config/windowtype.js'
import * as PubsubType from '@/config/pubsubtype.js'
// import PubSub from 'pubsub-js'
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    /**
     * 第二个参数表示选择表单后回调的方法，
     */
    window[PubsubType.PUBSUB_DIGLOG_CHOOSE_FORM] = (callback) => {
      this.dialogShow = true
      this.loading = true
      this.callback = callback
      // 请求后台获取表单列表
      this.$post('/form/infos', null).then(response => {
        this.loading = false
        this.tableData = initData(response)
      })
      this.$nextTick(() => {
        if (this.$refs['settingDialog']) {
          this.$refs['settingDialog'].open()
        }
      })
    }
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      loading: true,
      formLabelWidth: '120px',
      tableData: null,
      callback: () => { }
    }
  },
  watch: {
  },
  methods: {
    addForm () {
      this.$prompt('输入创建表单名称！', '新增', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        inputValidator: (str) => {
          if (str.length > 24) {
            return '表单名称长度不能超过24个字！'
          }
          return true
        },
        inputErrorMessage: '表单名称不真确'
      }).then(({ value }) => {
        // 请求后台添加
        this.loading = true
        this.$post('/form/page-form-create', {
          name: value
        }).then(response => {
          this.loading = false
          this.tableData = initData(response)
        })
      }).catch(() => { })
    },
    // 更新
    editorForm (item) {
      this.$prompt('修改表单名称！', '修改', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: item.name,
        closeOnClickModal: false,
        inputValidator: (str) => {
          if (str.length > 24) {
            return '表单名称长度不能超过24个字！'
          }
          return true
        },
        inputErrorMessage: '表单名称不真确'
      }).then(({ value }) => {
        // 请求后台添加
        this.loading = true
        this.$post('/form/page-form-update', {
          id: item.id,
          name: value
        }).then(response => {
          this.loading = false
          this.tableData = initData(response)
        })
      }).catch(() => { })
    },
    // 选择了该表单
    chooseForm (item) {
      this.loading = true
      this.$post('/form/get-form-data', {
        formId: item.id
      }).then(response => {
        this.tableData = initData(response)
        if (typeof this.callback === 'function') {
          this.callback(response, () => {
            this.close()
          })
        }
      })
    },
    close () {
      this.dialogShow = false
      this.tableData = null
      this.callback = () => { }
    }
  },
  components: {
    SetDesignDialog
  }
}

function initData (response) {
  if (response) {
    if (response.list && response.list.length > 0) {
      return response.list
    } else if (response.length > 0) {
      return response
    }
    return null
  } else {
    return null
  }
}

</script>
